@import "./common.less";

:root {
	--primary-color: var(--ftc);
	--sidebar-bg: #20222A;
	--text-color: #909399;
	--hover-bg: rgba(255, 255, 255, 0.05);
	--active-bg: rgba(255, 255, 255, 0.08);
	--content-bg: #f2f3f5;
	--sidebar-width: 220px;
	--header-height: 60px;
}

body {
	font-size: var(--ft16);
	color: #37485C;
	.d-flex;

	.flex-column;
	min-height: 100vh;

	@media (max-width: 768px) {}
}

main {
	flex: 1;
}

.checkBox {
	.layui-form-checkbox {
		margin-top: 0 !important;
	}

	color: #82899E;
	font-size: var(--ft14);

	a {
		color: var(--ftc);
	}

	.red {
		color: #C62828;
	}

	.checkText {
		display: inline-block;
	}
}

.layui-layer-btn .layui-layer-btn0 {
	font-size: var(--ft14);
	background: var(--ftc);
}

.xieyiDialog {
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 500px;
	max-width: 100%;

	textarea {
		width: -webkit-fill-available;
		aspect-ratio: 4/1;
		margin: var(--p20);
		padding: var(--p10);
		border: 1px solid #ccc;
	}
}

.layui-form-checkbox {
	a {
		color: var(--ftc);
	}
}

.layui-btn:disabled {
	opacity: 0.6;
}

.layui-tabs-header .layui-this,
.layui-tabs-header li:hover {
	color: var(--ftc);
}

.layui-tabs-header .layui-this:after {
	border-color: var(--ftc);
}

.LoginMain {
	--main: 1400px;
	background-image: url(../images/login.png);
	min-height: 100vh;
	.d-flex;
	.flex-column;

	.logo {
		padding: var(--p20) var(--p70);
	}

	.login-container {
		flex: 1;
		.d-flex;
		.jc-fe;
		margin-top: 6vh;
	}

	.foot {
		font-size: var(--ft14);
		text-align: center;
		padding: var(--p20);

		a {
			margin: var(--p10);
		}
	}

	.card-header {
		.flex-center;
		margin-bottom: var(--p25);
	}

	.login-card {
		width: 440px;
		max-width: 100%;
	}

	.layui-tabs-body {
		padding: 0;
	}

	.layui-tabs-item {
		padding: 0;
	}

	.layui-card-body {
		border-radius: 20px;
		background-color: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: var(--p30) var(--p60) var(--p20);

		h1 {
			font-weight: normal;
			margin-bottom: var(--p15);
			font-size: var(--ft26);
		}
	}

	.layui-form-label {
		width: 80px;
	}

	.layui-input-inline {
		width: 260px;
	}

	.error-message {
		color: #f5222d;
		font-size: var(--ft12);
		margin-top: 4px;
		display: none;
	}

	.layui-tabs-header {
		.d-flex;
		gap: var(--p20);
		margin-bottom: var(--p20);
	}



	.signup {
		font-weight: bold;
		font-size: var(--ft14);
		margin-top: var(--p25);
		.d-flex;
		.jc-fe;
		color: var(--ftc);
		margin-left: auto;

	}

	.agree {
		.layui-form-checkbox {
			margin-top: 0 !important;
		}

		color: #82899E;
		font-size: var(--ft14);

		a {
			color: var(--ftc);
		}

		.checkText {
			display: inline-block;
		}
	}

	.layui-btn {
		padding: 0;
		width: 100%;
	}


	.btnBlock {
		padding-left: var(--p20);
	}

	#getCaptchaBtn {
		--btn: 40px;
	}

}

.layui-tabs-header li {
	padding: 0;
}


.layui-tabs-header .layui-this:after {
	border-width: 2px;
}

.btn-gary {
	font-size: var(--ft14);
	color: #222222;
	background: #F5F5F5;
	border: none;
	border-radius: 9px;

	&:hover {
		color: initial;
	}
}

.form-label {
	display: block;
	color: #666666;
	margin-bottom: var(--p10);
}

.codeBox {
	position: relative;
	overflow: hidden;

	.layui-btn {
		--btn: 38px;
		top: 50%;
		right: 1px;
		transform: translateY(-50%);
		position: absolute;
		border-radius: 0 6px 6px 0;
	}

	input {
		padding-right: 120px;
	}
}

.picUpload {
	padding: var(--p25) var(--p20);
	background: #F7F8FA;
	border-radius: 16px;
	cursor: pointer;
	.d-flex;
	.al-fs;
	gap: var(--p20);

	.text {
		flex-shrink: 0;
		width: 40%;
	}

	h1 {
		margin-top: var(--p15);
		font-size: var(--ft24);
		font-weight: normal;
	}

	p {
		opacity: 0.3;
	}

	.img {
		flex: 1;
	}

	img {
		max-height: 170px;
	}
}

.userUpload {
	.d-flex;
	.al-c;

	gap: var(--p10);

	.user_img {
		width: 83px;
	}
}

.AuthMain {
	.foot .layui-btn {
		--btn: 34px;
		--btn_size: 12px;
		padding: 0 var(--p30);
		border-radius: 3px;
	}

	.logo {
		padding: var(--p20) var(--p70);
	}

	.layui-textarea {
		height: 250px;
	}

	background: #EFF5FD;

	.PanelCard {
		padding: var(--p40) 0;
		border-radius: 12px;
		margin: var(--p70) auto;
		background: #FFFFFF;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

		.body {
			padding: 0 var(--p120);

		}
	}

	.grid-row {
		gap: var(--p30);
	}

	h2 {
		font-weight: normal;
		font-size: var(--ft20);
		margin: var(--p20) 0;
	}

	.layui-tabs-header {
		margin-bottom: var(--p40);
		.flex-center;
		gap: var(--p70);

		li a {
			font-size: var(--ft18);

		}

	}



}

/* 进度条容器 */
.progress-steps {
	width: 100%;

	padding: 0 1rem;
	/* 防止边缘内容溢出 */
	box-sizing: border-box;

	/* 步骤容器 */
	.steps-wrapper {
		display: flex;
		position: relative;
		.jc-s;
	}

	/* 底层进度线 */
	.steps-wrapper::before {
		content: '';
		position: absolute;
		width: calc(100% - 50px);

		top: 21px;
		left: 50%;
		transform: translateX(-50%);
		height: 3px;

		background-color: #e5e7eb;
		z-index: 1;
	}

	/* 活动进度线（根据当前步骤动态调整宽度） */
	.active-line {
		position: absolute;
		top: 50%;
		left: 0;
		height: 4px;
		background-color: #3b82f6;
		transform: translateY(-50%);
		z-index: 2;
		width: 33.33%;
		/* 默认第一步完成，实际需通过JS动态调整 */
		transition: width 0.3s ease;
	}

	/* 步骤项 */
	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 3;
	}

	/* 步骤圆圈 */
	.step-circle {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-bottom: 0.5rem;
		transition: all 0.3s ease;
		width: 42px;
		aspect-ratio: 1/1;


	}

	/* 步骤文本 */
	.step-text {
		text-align: center;
		font-size: var(--ft18);
		transition: color 0.3s ease;
		color: #444444;
	}

	/* 未完成状态 */
	.step:not(.active):not(.completed) .step-circle {

		color: #D1D1D1;
		font-size: var(--ft18);
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 14, 8, 0.1);
	}

	/* 已完成状态 */
	.step.completed .step-circle {
		background-color: #3b82f6;
		color: white;
		border: 2px solid #3b82f6;
		font-size: 16px;

	}

	/* 当前激活状态 */
	.step.active .step-circle {

		background-color: var(--ftc);
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		font-family: layui-icon !important;
		position: relative;
		overflow: hidden;
		.flex-center;
		font-size: var(--ft20);

		&::before {
			content: "\e605";
			display: block;
			position: absolute;
			color: #fff;
			background-color: var(--ftc);

		}
	}


}

.PicList {
	.d-grid;
	.grid4;
	flex: 1 1 auto;
	gap: var(--p20);

	.item {
		box-shadow: 0px 1px 8px 0px rgba(30, 3, 0, 0.15);
		border-radius: 4px;
		position: relative;
		color: #ACACAC;
		.flex-center;
		aspect-ratio: 230/150;
		background: #FFFFFF;
		border-radius: 3px;
		border: 2px solid #EAEAEA;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		i {

			top: -0.7em;
			right: -0.5em;
			position: absolute;
			color: #D81E06;
			font-size: var(--ft30);
			cursor: pointer;
		}
	}

	.addItem {
		box-shadow: none;
	}

}

.form-item-inline {
	--btn: 40px;
	.d-flex;
	.al-c;
	margin-bottom: vaR(--p20);

	.input-inline {
		.d-flex;
		.al-c;
		flex-wrap: wrap;
	}

	.layui-btn {
		flex-shrink: 0;
		border-radius: 3px;
	}

	.form-label {
		color: #37485C;
		white-space: nowrap;
		text-align: right;
		width: 8em;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.block {
		flex: 1;
	}

	.layui-form-mid {
		font-size: vaR(--ft14);
		margin-left: 5px;
	}

	.layui-input,
	.layui-select,
	.layui-textarea {
		border-radius: 3px;
	}

	.layui-input,
	.layui-select {
		width: 350px;
		max-width: 100%;
	}

	.number-input {
		width: 150px;
		max-width: 100%;

	}

	.foot {
		.d-flex;
		gap: var(--p20);
		margin-top: var(--p40);
	}

}

.layui-input:focus,
.layui-textarea:focus {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
	border-color: #DBDEE2 !important;
}

.layui-btn-primary {
	border-color: #AAAAAA;
	background: #AAAAAA;
	color: #fff;

	&:hover {
		color: #fff;
	}
}

.FormPage {
	width: 1200px;
	max-width: 100%;
	margin: var(--p20) auto;
}

.title-tag {
	background: #F8F8F8;
	padding: var(--p15) var(--p30);
	color: #00010F;
	font-weight: bold;
}

.ContactPage {
	background: #FFFFFF;
	box-shadow: 0px 1px 8px 0px rgba(30, 3, 0, 0.15);
	border-radius: 4px;
	min-height: 100%;
	padding: var(--p20);
}

.CenterMain {

	.Header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--header-height);
		color: white;
		display: flex;
		align-items: center;
		z-index: 1000;
		transition: padding-left 0.3s ease;
		box-shadow: 0px 3px 6px 0px rgba(189, 183, 255, 0.1);

		.logo {
			height: 100%;
			background-color: var(--primary-color);
			padding: 0 20px;
			width: var(--sidebar-width);
			border-right: 1px solid rgba(255, 255, 255, 0.2);
			transition: all 0.3s ease;
			white-space: nowrap;
			overflow: hidden;
		}

		.logo.hidden {
			width: 0;
			padding: 0;
			border-right: 0;
			opacity: 0;
		}

		.nav-buttons {
			display: flex;
			list-style: none;
			color: #B9C1C8;
			font-size: var(--ft18);

			.desktop-text {
				font-size: var(--ft24);

			}

			flex: 1;

			li {
				cursor: pointer;
				.flex-center;
				gap: var(--p10);
				cursor: pointer;
				transition: background-color 0.2s;

				&:hover {
					background-color: rgba(255, 255, 255, 0.1);
				}
			}
		}

		.top {
			flex: 1;
			.d-flex;
			.al-c;
			padding: 0 var(--p25);

		}

		.hr {
			margin: 0 var(--p30);
			height: 40px;
			width: 1px;
			background: #BDBFC6;
			opacity: 0.3;
		}

		.layui-nav .layui-nav-more {
			display: inline-block;
			position: relative;
			margin-left: 5px;
		}


		.layui-nav .layui-nav-item>a {
			color: #1F212E;
			padding: 0;
		}

		.layui-nav-img {
			width: 40px;
			height: 40px;
			object-fit: cover;
		}

		.menu-btn {
			.d-flex;

			gap: var(--p35);

			a {
				position: relative;
			}

			.msg {
				position: absolute;
				right: 2px;
				top: 2px;
				width: 6px;
				height: 6px;
				background: #F25643;
				border-radius: 50%;
			}
		}




	}



	.Sidebar {
		position: fixed;
		top: var(--header-height);
		left: 0;
		width: var(--sidebar-width);
		height: calc(100vh - var(--header-height));
		background-color: #FFF;
		color: var(--text-color);
		transition: transform 0.3s ease;
		overflow-y: auto;
		z-index: 900;
		padding-top: var(--p30);
		color: #848B94;

		.title {
			.d-flex;
			.al-c;
			gap: 5px;
			border-left: 7px solid #fff;

			i {
				transition: all 0.3s;
				margin-left: auto;
				display: inline-block;
			}

			padding: var(--p15) 20px;

			.img {
				width: 25px;
			}

			.img2 {
				display: none;
			}

		}


		&.hidden {
			transform: translateX(-100%);
		}

		.menu-item {
			cursor: pointer;
			color: #848B94;
			transition: all 0.2s;

			dl {
				dd {
					a {
						display: block;
						padding: var(--p15) var(--p50);

						&.active,
						&:hover {

							color: var(--ftc);
							// background-color: rgba(55, 81, 255, 0.1);
						}
					}
				}
			}
		}


		.menu-item:hover,
		.menu-item.active {


			.title {
				background-color: var(--active-bg);
				color: var(--ftc);
				border-color: var(--ftc);

				.img1 {
					display: none;
				}

				i {
					transform: rotate(90deg);
				}

				.img2 {
					display: block;
				}

				background-color: rgba(55, 81, 255, 0.1);
			}

		}

	}

	.Content {
		position: fixed;
		top: var(--header-height);
		left: var(--sidebar-width);
		width: calc(100% - var(--sidebar-width));
		height: calc(100vh - var(--header-height));
		padding: 20px;
		transition: all 0.3s ease;
		background-color: var(--content-bg);
		overflow-y: auto;

		&.expanded {
			left: 0;
			width: 100%;
		}

		.container {
			min-height: 100%;
			padding: var(--p20);
			background-color: #fff;

			.layui-table-body {
				max-height: calc(100vh - 300px);
			}
		}
	}

}

.layui-table-hover {
	background: rgba(55, 81, 255, 0.03) !important;

}

.layui-table-checked {
	background: rgba(55, 81, 255, 0.02) !important;
}

.ShopAddPage {
	.tips {
		font-weight: bold;
		padding-left: var(--p30);
		margin-top: var(--p200);
		font-size: var(--ft14);
		color: #37485C;

		.t1 {
			font-size: var(--ft18);
		}
	}
}

.layui-table {
	min-width: 100%;

	.rate {
		color: #BAC1C7;
		.flex-column-center;
	}

	.userInfo {
		.flex-column-center;

		.img {
			aspect-ratio: 1/1;
			width: 72px;
		}

		text-align: center;
	}

	.OrderInfo {
		.d-flex;
		gap: 5px;

		.img {
			width: 104px;
			aspect-ratio: 104/137;
		}

		.title {
			color: var(--ftc);
			.line-clamp1;
		}

		.sub {
			margin: var(--p10) 0;
			color: #BAC1C8;
		}

		.price {
			color: #FF4242;
		}
	}

	.talk {
		padding-top: var(--p10);
		margin-top: var(--p10);
		border-top: 1px solid #E9E9E9;
		color: #FC9F1E;
		.line-clamp1;

	}

	.piclist {
		margin: var(--p10) 0;
		.d-flex;
		gap: var(--p10);

		.img {
			width: 55px;
			aspect-ratio: 1/1;
		}

		.img:nth-child(4n) {
			display: none;
		}
	}

	.foot {
		.d-flex;
		gap: 5px;
		flex-wrap: wrap;

		a {
			cursor: pointer;
		}

		span {
			color: #AAAAAA;
		}

		.img {
			cursor: pointer;
			margin-left: 10px;
			display: inline-flex;
		}
	}

	th {
		border-right: none;
		font-weight: normal;
		color: #00010F;
		font-size: var(--ft18);
		background: #F8F8F8;

	}

	td {
		border-right: none;
		color: #37485C;
		font-size: var(--ft16);
	}


}

.shopName {
	.d-flex;
	.al-c;
	gap: var(--p10);

	.img {
		width: 40px;
		aspect-ratio: 56/80;
		flex-shrink: 0;
	}

	.info {
		p {

			.line-clamp1;
		}
	}
}

.layui-form-item:after {
	display: none;
}

.layui-badge {
	min-width: 5em;
	font-size: var(--ft14);
	height: auto;
	padding: 5px var(--p10);
	font-weight: bold;


	&.layui-bg-orange {
		color: rgba(252, 160, 34, 1) !important;
		background-color: rgba(252, 160, 34, 0.2) !important;
	}

	&.layui-bg-blue {

		color: rgba(78, 162, 255, 1) !important;
		background-color: rgba(78, 162, 255, 0.2) !important;
	}

	&.layui-bg-red {
		color: rgba(236, 20, 20, 1) !important;
		background-color: rgba(236, 20, 20, 0.2) !important;
	}

	&.layui-bg-green {
		color: rgba(0, 203, 104, 1) !important;
		background-color: rgba(0, 203, 104, 0.2) !important;
	}

	&.layui-bg-prop {
		color: rgba(71, 46, 223, 1) !important;
		background-color: rgba(71, 46, 223, 0.2) !important;
	}
}

.layui-form-onswitch {
	border-color: var(--ftc);
	background-color: var(--ftc);

}

.btn-delete {
	color: #FE4F4F;

}

.btn-edit {
	color: var(--ftc);
}

.layui-table .layui-table-cell {

	height: auto;
	padding: var(--p15) var(--p30);

}

.StoreInfo {
	margin: var(--p30) 0;
}

.AccountInfo {
	.Pic {
		padding-left: var(--p40);
		gap: var(--p20);
	}

	h2 {
		font-weight: normal;
		margin: var(--p20) var(--p50);
		color: #444;
		font-size: var(--ft20);
	}

	.progress-steps {
		width: 80%;
		margin: var(--p20) auto;
	}

	.FormPage {

		margin: var(--p20) 0;

	}
}

.layui-table-column {
	padding: var(--p15) 0;
	text-align: center;

	.layui-laypage .layui-laypage-curr .layui-laypage-em {
		background-color: var(--ftc) !important;
	}
}

.SearchCom {
	margin-bottom: var(--p20);

	.layui-btn {
		border-radius: 0;
	}

	--btn:40px;
	--input: 40px;

	.layui-form-select {
		width: 120px;
	}

	.layui-input {
		border-radius: 0;
	}

	.foot {
		display: inline-block;
		margin-left: auto;
	}

	.layui-input-inline {
		width: auto;
	}

	.layui-form-item {
		display: flex;
		flex-wrap: wrap;
		gap: var(--p10);
		margin-bottom: 0;
	}
}

.layui-table-patch {
	display: none;
}


.OrderSearcItem {
	width: 100%;
	.d-flex;
	.al-c;
	.jc-s;
	gap: 10px;
	flex-wrap: wrap;

	.layui-form-select {
		width: 170px;
	}

	ul {
		font-size: var(--ft18);
		color: #00010F;
		.d-flex;
		.al-c;
		.jc-c;
		flex-wrap: wrap;
		gap: var(--p10);

		.item {
			padding: 5px var(--p20);

			&:not(:last-child) {
				border-right: 1px solid #D7D7D7;
			}

			&:hover,
			&.active {
				color: var(--ftc);
			}
		}
	}
}

.OrderInfo {
	.order-container {

		margin: 0 auto;
		background: #fff;
		border-radius: 4px;
		overflow: hidden;
	}

	.amount-summary {
		border-bottom: 1px solid #ebeef5;
		padding: var(--p30) var(--p40);

		strong {
			color: var(--ftc);
		}

		.item {
			text-align: right;

			.num {
				display: inline-block;
				width: 5em;
			}
		}

		&.grid-row {
			margin-bottom: var(--p20);
		}
	}

	.shopName {
		min-width: 300px;
		gap: var(--p30);
		.al-fs;

		.img {
			aspect-ratio: 1/1;
			width: 140px;
		}

		b {
			color: #222222;
			font-size: var(--ft18);
		}

		.text {
			font-size: var(--ft16);
		}

		text-align: left;
	}

	.order-info {
		padding: var(--p20) var(--p40);
		border-bottom: 1px solid #ebeef5;
		.d-flex;
		.al-c;
		.jc-s;
		flex-wrap: wrap;
		gap: var(--p10);

		>div {
			.d-flex;
			.al-c;
			flex-wrap: wrap;
			gap: var(--p40);
		}
	}

	.section-title {
		font-size: var(--ft20);
		color: #333;
		padding: var(--p15) var(--p30);
		.d-flex;
		.al-c;

		i {
			background-color: var(--ftc);
			height: 1em;
			width: 6px;
			display: inline-block;
			margin-right: 5px;
		}
	}

	.progress-steps {
		margin-bottom: var(--p30);
	}

	h5 {
		border-bottom: 0;
		font-weight: bold;
		color: #333;
		padding: var(--p15) var(--p30);
		margin-bottom: var(--p20);
	}

	.info-row {
		border-top: 1px solid #ebeef5;
		.d-grid;
		.grid2;
		gap: var(--p30);
		padding: var(--p25) var(--p30);

		.title {
			color: #444444;
			font-weight: bold;
			font-size: var(--ft18);
		}

		dl {
			margin-top: var(--p20);
			.d-grid;
			gap: var(--p10);
		}

	}

	.info-col {
		width: 50%;
		margin-bottom: 6px;
		color: #666;
	}

	.info-col strong {
		color: #333;
		display: inline-block;
		width: 70px;
		text-align: right;
		margin-right: 8px;
	}

	/* 商品表格 */
	.goods-table {
		width: 100%;
		border-collapse: collapse;
		border-bottom: 1px solid #ebeef5;
	}

	.goods-table thead {
		border-top: 1px solid #ebeef5;
		border-bottom: 1px solid #ebeef5;
	}

	.table-view {
		overflow: hidden;
		overflow-x: auto;
	}

	.goods-table th,
	.goods-table td {
		border-right: 1px solid #ebeef5;
		padding: var(--p20) var(--p10);
		text-align: center;
		color: #666;

		&:last-child {
			border-right: none;
		}
	}

	.goods-table td {

		font-size: var(--ft18);

	}

	.goods-table th {
		white-space: nowrap;
		min-width: 80px;
		;
		font-weight: bold;
		color: #666;
		padding: var(--p15) var(--p20);
		border: none;
	}

	.goods-img {
		width: 60px;
		height: 60px;
		object-fit: cover;
		border: 1px solid #ebeef5;
		border-radius: 4px;
	}

	/* 物流信息 */
	.logistics-info {

		border-top: 1px solid #ebeef5;
		padding: var(--p30) var(--p40);

		.logistics-list {
			.d-grid;
			.grid3;
			gap: var(--p15);
			color: #444444;
		}
	}


	.logistics-timeline {
		margin-top: var(--p60);

		.d-grid;
		gap: var(--p10);

		.timeline-item {
			.d-grid;
			.grid3;
			grid-template-columns: 150px 120px 1fr;
			gap: var(--p20);
		}

		.timeline-date {
			color: #444444;
			font-weight: bold;
		}

		.timeline-time {
			color: #444444;
			opacity: 0.7;
		}
	}




	.notice {
		margin-top: var(--p30);
		padding: var(--p15) var(--p20);
		background: #F9F1DA;
		counter-reset: #444444;
		border-radius: 4px;
		color: #666;
		font-size: 13px;
	}

	/* 操作按钮 */
	.action-foot-btns {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: var(--p20);
	}

	.layui-btn {
		--btn: 38px;
		border-radius: 3px;
	}

	.action-btns {
		border-top: 1px solid #ebeef5;
		padding: var(--p20) var(--p40);
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.back-info {
		border-top: 1px solid #ebeef5;
		padding: var(--p20) var(--p40) var(--p50);

	}


}

.cashNav {
	.d-flex;
	flex-wrap: wrap;
	gap: 5px;

	.item {
		border-radius: 6px 6px 0px 0px;
		background: rgba(55, 81, 255, 0.1);
		padding: 5px var(--p15);

		&.active {
			background-color: var(--ftc);
			color: #fff;
		}
	}
}

.red {
	color: rgba(216, 30, 6, 1);
}

.CashPage {
	.d-flex;
	.flex-column;
	min-height: 80vh;

	.content {
		flex: 1;
	}

	.info {
		font-size: vaR(--ft18);
		padding-left: var(--p40);
		margin-top: var(--p40);
		.d-flex;
		gap: var(--p10);

		li {
			width: 300px;
			max-width: 100%;
		}
	}

	.text {
		color: rgba(146, 144, 150, 1);
		padding: var(--p10) var(--p40);
	}

	.tips {
		margin-top: auto;
		font-size: var(--ft14);
		color: #888888;

		b {
			font-size: var(--ft16);
		}
	}

	.layui-form-label {
		width: 106px;
		white-space: nowrap;
	}

	.tag {}

	.FormPage {
		margin: var(--p20) 0;
	}

	.form-item-inline .foot {
		margin-top: 0;
	}
}

.StoreInfoCheck {
	.body {
		width: 1000px;
		max-width: 100%;
		margin: var(--p40) auto;
	}

	.grid-row {

		gap: var(--p30);
	}

	.progress-steps {
		margin-bottom: var(--p30);
	}

	h2 {
		font-size: var(--ft20);
		margin-bottom: var(--p30);
	}
}

.StoreModel {
	margin: var(--p30) 0;
	width: 100%;

	.edit-btn,
	.delete-btn {
		cursor: pointer;
	}

	.layui-form-radio:hover>*,
	.layui-form-radioed,
	.layui-form-radioed>i {
		color: #D81E06;
	}

	.form-item-inline {
		margin-bottom: var(--p30);
	}

	.layui-form-radio>* {
		color: #444;
	}

	.tab-view {
		overflow: hidden;
		overflow-x: auto;
	}

	.layui-table {
		margin-top: 0;

		th {
			padding: var(--p20) var(--p20);
			font-size: var(--ft16);
			background: #F3F5F9;
			white-space: nowrap;
			min-width: 100px;
		}

		td {
			padding: var(--p20) var(--p20);
			font-size: var(--ft16);
		}

		width: 100%;

		.layui-input {
			width: auto;
		}
	}
}

@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {

	.OrderInfo .shopName .img {
		width: 50px;
	}

	.OrderInfo .info-row {
		.grid1;
	}

	.OrderSearcItem ul {
		.jc-fs;
		gap: var(--p20);
	}

	.form-item-inline .form-label {
		width: 7em;
	}

	.SearchCom .layui-form-select {
		width: auto;
	}

	.SearchCom .layui-input {
		width: 200px;
	}

	.CenterMain .Header .layui-nav-img {
		width: 20px;
		height: 20px;
	}

	.CenterMain .Sidebar {

		box-shadow: 0px 3px 6px 0px rgba(189, 183, 255, 0.1);
	}

	.CenterMain .Sidebar .title .img {
		width: 15px;
	}

	.CenterMain .Header .menu-btn a {
		width: 20px;
	}

	.CenterMain .Header .logo {
		display: none;

	}

	.CenterMain .Content {
		width: 100%;
		left: 0;
	}

	.logo img {
		max-height: 25px;
	}

	.card-header img {
		max-height: 20px;
	}

	:root {
		--btn: 36px;
		--btn_size: 12px;
	}

	.PicList {
		.grid2;
	}

	.progress-steps .step-circle {
		width: 30px;
	}

	.progress-steps {
		padding: 0;
	}

	.progress-steps .steps-wrapper::before {
		top: 15px;
	}

	.OrderInfo .logistics-timeline .timeline-item {
		.grid1;
	}
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}